<template>
    <!-- 雷达图 -->
    <div class="app-container">
        <el-row :gutter="30" :style="{height: '400px', width: '100%'}">
            <div class="chart" ref="chart" :style="{height:'100%',width:'100%'}"></div>
        </el-row>
    </div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '@/views/dashboard/mixins/resize'

export default {
    name: 'ChartRadar',
    mixins: [resize],
    data() {
        return {
            chart: null
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart()
        })
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.dispose()
        this.chart = null
    },
    methods: {
        initChart() {
            this.chart = echarts.init(this.$refs['chart'], 'macarons')
            this.setOptions(this.chartData)
        },
        setOptions() {
            this.chart.setOption({
                title: {
                    text: '预算 vs 开销',
                    subtext: '纯属虚构'
                },
                tooltip: {
                    trigger: 'item', //触发类型,默认数据触发，可选为:'item' | 'axis'
                },
                legend: {
                    orient: 'vertical',
                    left: 'right',
                    top: 'bottom',
                    data: ['预算分配', '实际开销']
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {
                            show: true
                        },
                        dataView: {
                            show: true,
                            readOnly: true
                        },
                        restore: {
                            show: true
                        },
                        saveAsImage: {
                            show: true
                        }
                    }
                },
                polar: [  //极坐标
                    {
                        indicator: [  //雷达指标列表，同时也是label内容
                            {
                                text: '销售',
                                max: 6000,
                                min: 0
                            },
                            {
                                text: '管理',
                                max: 16000,
                                min: 0
                            },
                            {
                                text: '信息技术',
                                max: 30000,
                                min: 0
                            },
                            {
                                text: '客服',
                                max: 38000,
                                min: 0
                            },
                            {
                                text: '研发',
                                max: 52000,
                                min: 0
                            }
                        ]
                    }
                ],
                series: [
                    {
                        name: '',
                        type: 'radar',
                        data: [
                            {
                                value: [4300, 10000, 28000, 35000, 50000, 19000],
                                name: '预算分配'
                            }
                        ]
                    },
                    {
                        name: '',
                        type: 'radar',
                        data: [
                            {
                                value: [5000, 14000, 28000, 31000, 42000, 21000],
                                name: '实际开销'
                            }
                        ]
                    }
                ]
            });
        }
    }
}
</script>